<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端面试 | 茂茂个人博客</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="https://pan.zealsay.com/blog/favicon.ico">
    <script>
          var _hmt = _hmt || [];
          (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?b0aae218897fa9d8a9f76e9a77e0b3c6";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
          })();
        </script>
    <meta name="description" content="开心最重要呀">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/blog/assets/css/0.styles.ed123d92.css" as="style"><link rel="preload" href="/blog/assets/js/app.e4cba77b.js" as="script"><link rel="preload" href="/blog/assets/js/5.1ad0ff24.js" as="script"><link rel="preload" href="/blog/assets/js/1.fe4eac58.js" as="script"><link rel="preload" href="/blog/assets/js/43.ace95e0e.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.58980e71.js"><link rel="prefetch" href="/blog/assets/js/11.461ee1ab.js"><link rel="prefetch" href="/blog/assets/js/12.de9aade4.js"><link rel="prefetch" href="/blog/assets/js/13.c1f7abfc.js"><link rel="prefetch" href="/blog/assets/js/14.eeee4da5.js"><link rel="prefetch" href="/blog/assets/js/15.225a74ee.js"><link rel="prefetch" href="/blog/assets/js/16.3eef12b1.js"><link rel="prefetch" href="/blog/assets/js/17.a97bd7c7.js"><link rel="prefetch" href="/blog/assets/js/18.461a74bd.js"><link rel="prefetch" href="/blog/assets/js/19.7b390d19.js"><link rel="prefetch" href="/blog/assets/js/20.8638de7c.js"><link rel="prefetch" href="/blog/assets/js/21.8b1e5c62.js"><link rel="prefetch" href="/blog/assets/js/22.b6b97b5b.js"><link rel="prefetch" href="/blog/assets/js/23.c3e9364b.js"><link rel="prefetch" href="/blog/assets/js/24.daa0ce9e.js"><link rel="prefetch" href="/blog/assets/js/25.0c44cdb2.js"><link rel="prefetch" href="/blog/assets/js/26.ed604668.js"><link rel="prefetch" href="/blog/assets/js/27.0c4acdea.js"><link rel="prefetch" href="/blog/assets/js/28.4f896280.js"><link rel="prefetch" href="/blog/assets/js/29.50e69b67.js"><link rel="prefetch" href="/blog/assets/js/3.90606e56.js"><link rel="prefetch" href="/blog/assets/js/30.5c69a6a2.js"><link rel="prefetch" href="/blog/assets/js/31.8a40c25d.js"><link rel="prefetch" href="/blog/assets/js/32.7a1f46ed.js"><link rel="prefetch" href="/blog/assets/js/33.a48429b4.js"><link rel="prefetch" href="/blog/assets/js/34.8f224bd0.js"><link rel="prefetch" href="/blog/assets/js/35.bc552eb5.js"><link rel="prefetch" href="/blog/assets/js/36.7e0cc0d9.js"><link rel="prefetch" href="/blog/assets/js/37.2bb21bfb.js"><link rel="prefetch" href="/blog/assets/js/38.f77b014f.js"><link rel="prefetch" href="/blog/assets/js/39.8a5ba8b0.js"><link rel="prefetch" href="/blog/assets/js/4.89c80be7.js"><link rel="prefetch" href="/blog/assets/js/40.c600c684.js"><link rel="prefetch" href="/blog/assets/js/41.0dbac397.js"><link rel="prefetch" href="/blog/assets/js/42.f1035a7b.js"><link rel="prefetch" href="/blog/assets/js/44.0ff283b9.js"><link rel="prefetch" href="/blog/assets/js/45.836151e7.js"><link rel="prefetch" href="/blog/assets/js/46.033824d7.js"><link rel="prefetch" href="/blog/assets/js/47.499ce120.js"><link rel="prefetch" href="/blog/assets/js/48.39c2db90.js"><link rel="prefetch" href="/blog/assets/js/49.ca266dff.js"><link rel="prefetch" href="/blog/assets/js/50.c12ee57e.js"><link rel="prefetch" href="/blog/assets/js/51.4c3c8a1c.js"><link rel="prefetch" href="/blog/assets/js/52.c11bc4a4.js"><link rel="prefetch" href="/blog/assets/js/53.d4dc4ec7.js"><link rel="prefetch" href="/blog/assets/js/54.300dd272.js"><link rel="prefetch" href="/blog/assets/js/55.6e86af02.js"><link rel="prefetch" href="/blog/assets/js/56.d91a04d8.js"><link rel="prefetch" href="/blog/assets/js/6.4f77b856.js"><link rel="prefetch" href="/blog/assets/js/7.db9a864b.js"><link rel="prefetch" href="/blog/assets/js/8.bf0cca83.js"><link rel="prefetch" href="/blog/assets/js/9.84ddd18e.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.ed123d92.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-0c5314fc><div data-v-0c5314fc><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-0c5314fc data-v-0c5314fc><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-5cb9a64e data-v-0c5314fc data-v-0c5314fc><h3 class="title" style="display:none;" data-v-5cb9a64e data-v-5cb9a64e>茂茂个人博客</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-5cb9a64e data-v-5cb9a64e><input type="password" value="" data-v-5cb9a64e> <span data-v-5cb9a64e>Konck! Knock!</span> <button data-v-5cb9a64e>OK</button></label> <div class="footer" style="display:none;" data-v-5cb9a64e data-v-5cb9a64e><span data-v-5cb9a64e><i class="iconfont reco-theme" data-v-5cb9a64e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-5cb9a64e>vuePress-theme-reco</a></span> <span data-v-5cb9a64e><i class="iconfont reco-copyright" data-v-5cb9a64e></i> <a data-v-5cb9a64e><span data-v-5cb9a64e>茂茂</span>
            
          <span data-v-5cb9a64e>2019 - </span>
          2023
        </a></span></div></div> <div class="hide" data-v-0c5314fc><div data-v-0c5314fc><div id="smart" class="wrapper-page" style="background-image:url(/blog/articleImage/img01.jpeg);background-position-x:center;background-position-y:center;background-size:cover;background-repeat-x:no-repeat;background-repeat-y:no-repeat;" data-v-0c5314fc><header class="navbar" data-v-0c5314fc><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><img src="/blog/logo.png" alt="茂茂个人博客" class="logo"> <span class="site-name">茂茂个人博客</span></a> <div class="links"><div id="dayNightSwitch" class="generalWrapper" data-v-32f44868><a class="click" data-v-32f44868><div class="onOff daySwitch" data-v-32f44868><div class="star star1" data-v-32f44868></div> <div class="star star2" data-v-32f44868></div> <div class="star star3" data-v-32f44868></div> <div class="star star4" data-v-32f44868></div> <div class="star star5" data-v-32f44868></div> <div class="star sky" data-v-32f44868></div> <div class="sunMoon" data-v-32f44868><div class="crater crater1" data-v-32f44868></div> <div class="crater crater2" data-v-32f44868></div> <div class="crater crater3" data-v-32f44868></div> <div class="cloud part1" data-v-32f44868></div> <div class="cloud part2" data-v-32f44868></div></div></div></a></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      博客
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/工具与阅读/" class="nav-link"><i class="iconfont undefined"></i>
  工具与阅读
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/vue/" class="nav-link"><i class="iconfont undefined"></i>
  vue
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/前端/" class="nav-link"><i class="iconfont undefined"></i>
  前端
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/后端/" class="nav-link"><i class="iconfont undefined"></i>
  后端
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/node/" class="nav-link"><i class="iconfont undefined"></i>
  node
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/IOS/" class="nav-link"><i class="iconfont undefined"></i>
  IOS
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/WebGIS/" class="nav-link"><i class="iconfont undefined"></i>
  WebGIS
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/React/" class="nav-link"><i class="iconfont undefined"></i>
  React
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/面试/" class="nav-link"><i class="iconfont undefined"></i>
  面试
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/Angular/" class="nav-link"><i class="iconfont undefined"></i>
  Angular
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/数据结构与算法/" class="nav-link"><i class="iconfont undefined"></i>
  数据结构与算法
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/微前端架构/" class="nav-link"><i class="iconfont undefined"></i>
  微前端架构
</a></li></ul></div></div><div class="nav-item"><a href="/blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/blog/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div><div class="nav-item"><a href="/blog/about/" class="nav-link"><i class="iconfont reco-account"></i>
  关于
</a></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-0c5314fc></div> <aside class="sidebar" data-v-0c5314fc><div class="personal-info-wrapper" data-v-03833281 data-v-0c5314fc><img src="/blog/logo.png" alt="author-avatar" class="personal-img" data-v-03833281> <h3 class="name" data-v-03833281>
    茂茂
  </h3> <div class="num" data-v-03833281><div data-v-03833281><h3 data-v-03833281>43</h3> <h6 data-v-03833281>文章</h6></div> <div data-v-03833281><h3 data-v-03833281>30</h3> <h6 data-v-03833281>标签</h6></div></div> <hr data-v-03833281></div> <nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      博客
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/categories/工具与阅读/" class="nav-link"><i class="iconfont undefined"></i>
  工具与阅读
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/vue/" class="nav-link"><i class="iconfont undefined"></i>
  vue
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/前端/" class="nav-link"><i class="iconfont undefined"></i>
  前端
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/后端/" class="nav-link"><i class="iconfont undefined"></i>
  后端
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/node/" class="nav-link"><i class="iconfont undefined"></i>
  node
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/IOS/" class="nav-link"><i class="iconfont undefined"></i>
  IOS
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/WebGIS/" class="nav-link"><i class="iconfont undefined"></i>
  WebGIS
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/React/" class="nav-link"><i class="iconfont undefined"></i>
  React
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/面试/" class="nav-link"><i class="iconfont undefined"></i>
  面试
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/Angular/" class="nav-link"><i class="iconfont undefined"></i>
  Angular
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/数据结构与算法/" class="nav-link"><i class="iconfont undefined"></i>
  数据结构与算法
</a></li><li class="dropdown-item"><!----> <a href="/blog/categories/微前端架构/" class="nav-link"><i class="iconfont undefined"></i>
  微前端架构
</a></li></ul></div></div><div class="nav-item"><a href="/blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/blog/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div><div class="nav-item"><a href="/blog/about/" class="nav-link"><i class="iconfont reco-account"></i>
  关于
</a></div> <!----></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-5cb9a64e data-v-0c5314fc><h3 class="title" style="display:none;" data-v-5cb9a64e data-v-5cb9a64e>前端面试</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-5cb9a64e data-v-5cb9a64e><input type="password" value="" data-v-5cb9a64e> <span data-v-5cb9a64e>Konck! Knock!</span> <button data-v-5cb9a64e>OK</button></label> <div class="footer" style="display:none;" data-v-5cb9a64e data-v-5cb9a64e><span data-v-5cb9a64e><i class="iconfont reco-theme" data-v-5cb9a64e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-5cb9a64e>vuePress-theme-reco</a></span> <span data-v-5cb9a64e><i class="iconfont reco-copyright" data-v-5cb9a64e></i> <a data-v-5cb9a64e><span data-v-5cb9a64e>茂茂</span>
            
          <span data-v-5cb9a64e>2019 - </span>
          2023
        </a></span></div></div></div> <div data-v-0c5314fc><main class="page" style="padding-right:0;"><div class="page-title" style="display:none;"><h1 class="title">前端面试</h1> <div class="page-info" data-v-0efa1f05><i class="iconfont reco-account" data-v-0efa1f05><span data-v-0efa1f05>茂茂</span></i> <i class="iconfont reco-date" data-v-0efa1f05><span data-v-0efa1f05>2022-02-22</span></i> <i class="iconfont reco-eye" data-v-0efa1f05><span id="/blog/blogs/tec/2022/022201.html" data-flag-title="Your Article Title" class="leancloud-visitors" data-v-0efa1f05><a class="leancloud-visitors-count" style="font-size:.9rem;font-weight:normal;color:#999;"></a></span></i> <i class="iconfont reco-tag tags" data-v-0efa1f05><span class="tag-item" data-v-0efa1f05>面试</span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><h2 id="css"><a href="#css" class="header-anchor">#</a> css</h2> <h4 id="calc-support-media各自的含义及用法"><a href="#calc-support-media各自的含义及用法" class="header-anchor">#</a> calc, support, media各自的含义及用法？</h4> <p>@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。</p> <p>calc() 函数用于动态计算长度值。 calc()函数支持 &quot;+&quot;, &quot;-&quot;, &quot;*&quot;, &quot;/&quot; 运算；</p> <p>@media 查询，你可以针对不同的媒体类型定义不同的样式。</p> <h4 id="css水平、垂直居中的写法-请至少写出4种"><a href="#css水平、垂直居中的写法-请至少写出4种" class="header-anchor">#</a> css水平、垂直居中的写法，请至少写出4种？</h4> <h5 id="水平居中"><a href="#水平居中" class="header-anchor">#</a> 水平居中</h5> <ul><li>行内元素: text-align: center</li> <li>块级元素: margin: 0 auto</li> <li>position:absolute +left:50%+ transform:translateX(-50%)</li> <li>display:flex + justify-content: center</li></ul> <h5 id="垂直居中"><a href="#垂直居中" class="header-anchor">#</a> 垂直居中</h5> <ul><li>设置line-height 等于height</li> <li>position：absolute +top:50%+ transform:translateY(-50%)</li> <li>display:flex + align-items: center</li> <li>display:table+display:table-cell + vertical-align: middle;</li></ul> <h4 id="_1rem、1em、1vh、1px各自代表的含义"><a href="#_1rem、1em、1vh、1px各自代表的含义" class="header-anchor">#</a> 1rem、1em、1vh、1px各自代表的含义？</h4> <h5 id="rem"><a href="#rem" class="header-anchor">#</a> rem</h5> <p>rem是全部的长度都相对于根元素</p><html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。<p></p> <h5 id="em"><a href="#em" class="header-anchor">#</a> em</h5> <p>子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size</p> <h5 id="vw-vh"><a href="#vw-vh" class="header-anchor">#</a> vw/vh</h5> <p>全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。</p> <h5 id="px"><a href="#px" class="header-anchor">#</a> px</h5> <p>px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。</p> <p>一般电脑的分辨率有{1920*1024}等不同的分辨率</p> <p>1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素</p> <h5 id="画一条0-5px的直线"><a href="#画一条0-5px的直线" class="header-anchor">#</a> 画一条0.5px的直线？</h5> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="说一下盒模型"><a href="#说一下盒模型" class="header-anchor">#</a> 说一下盒模型？</h4> <p>盒模型的组成，由里向外content,padding,border,margin.</p> <p>在IE盒子模型中，width表示content+padding+border这三个部分的宽度</p> <p>在标准的盒子模型中，width指content部分的宽度</p> <p>box-sizing的使用</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">box-sizing</span><span class="token punctuation">:</span> content-box 是W3C盒子模型
<span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box 是IE盒子模型
</code></pre></div><p>box-sizing的默认属性是content-box</p> <h4 id="画一个三角形"><a href="#画一个三角形" class="header-anchor">#</a> 画一个三角形？</h4> <div class="language-html extra-class"><pre class="language-html"><code>.a{
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent #0099CC transparent transparent;
            transform: rotate(90deg); /*顺时针旋转90°*/
 }

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>a<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><h4 id="清除浮动的几种方式-及原理"><a href="#清除浮动的几种方式-及原理" class="header-anchor">#</a> 清除浮动的几种方式，及原理？</h4> <ul><li>::after / <br> / clear: both</li> <li>创建父级 BFC(overflow:hidden)</li> <li>父级设置高度</li></ul> <blockquote><p>BFC （块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。</p></blockquote> <p>触发条件:</p> <ul><li>根元素</li> <li>position: absolute/fixed</li> <li>display: inline-block / table</li> <li>float 元素</li> <li>ovevflow !== visible</li></ul> <p>规则:</p> <ul><li>属于同一个 BFC 的两个相邻 Box 垂直排列</li> <li>属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠</li> <li>BFC 的区域不会与 float 的元素区域重叠</li> <li>计算 BFC 的高度时，浮动子元素也参与计算</li> <li>文字层不会被浮动层覆盖，环绕于周围</li></ul> <h2 id="html"><a href="#html" class="header-anchor">#</a> html</h2> <h4 id="说一下标签的用法"><a href="#说一下标签的用法" class="header-anchor">#</a> 说一下<label>标签的用法</label></h4> <p>label标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验</p> <h4 id="遍历a节点的父节点下的所有子节点"><a href="#遍历a节点的父节点下的所有子节点" class="header-anchor">#</a> 遍历A节点的父节点下的所有子节点</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
    <span class="token keyword">var</span> b<span class="token operator">=</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;a&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span>children<span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre></div><h2 id="js"><a href="#js" class="header-anchor">#</a> js</h2> <h4 id="用js递归的方式写1到100求和"><a href="#用js递归的方式写1到100求和" class="header-anchor">#</a> 用js递归的方式写1到100求和？</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span>num2</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token keyword">var</span> num <span class="token operator">=</span> num1<span class="token operator">+</span>num2<span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>num2<span class="token operator">+</span><span class="token number">1</span><span class="token operator">&gt;</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	 <span class="token keyword">return</span> num<span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
	  <span class="token keyword">return</span> <span class="token function">add</span><span class="token punctuation">(</span>num<span class="token punctuation">,</span>num2<span class="token operator">+</span><span class="token number">1</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
<span class="token keyword">var</span> sum <span class="token operator">=</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  
</code></pre></div><h4 id="页面渲染html的过程"><a href="#页面渲染html的过程" class="header-anchor">#</a> 页面渲染html的过程？</h4> <p>浏览器渲染页面的一般过程：</p> <p>1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。</p> <p>2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 &lt; 用户设置 &lt; 外链样式 &lt; 内联样式 &lt; html中的style。</p> <p>3.DOM Tree + CSSOM --&gt; 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。</p> <p>DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。</p> <p>4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。</p> <p>以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。</p> <h4 id="说一下cors"><a href="#说一下cors" class="header-anchor">#</a> 说一下CORS？</h4> <p>CORS是一种新标准，支持同源通信，也支持跨域通信。fetch是实现CORS通信的</p> <h4 id="如何中断ajax请求"><a href="#如何中断ajax请求" class="header-anchor">#</a> 如何中断ajax请求？</h4> <p>一种是设置超时时间让ajax自动断开，另一种是手动停止ajax请求，其核心是调用XML对象的abort方法，ajax.abort()</p> <h4 id="说一下事件代理"><a href="#说一下事件代理" class="header-anchor">#</a> 说一下事件代理？</h4> <p>事件委托是指将事件绑定到目标元素的父元素上，利用冒泡机制触发该事件</p> <div class="language-js extra-class"><pre class="language-js"><code>ulEl<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> target <span class="token operator">=</span> event<span class="token punctuation">.</span>target <span class="token operator">||</span> event<span class="token punctuation">.</span>srcElement<span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token operator">!</span>target <span class="token operator">&amp;&amp;</span> target<span class="token punctuation">.</span>nodeName<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">&quot;LI&quot;</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>target<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="target、currenttarget的区别"><a href="#target、currenttarget的区别" class="header-anchor">#</a> target、currentTarget的区别？</h4> <p>currentTarget当前所绑定事件的元素</p> <p>target当前被点击的元素</p> <h4 id="说一下宏任务和微任务"><a href="#说一下宏任务和微任务" class="header-anchor">#</a> 说一下宏任务和微任务？</h4> <ul><li>宏任务：当前调用栈中执行的任务称为宏任务。（主代码快，定时器等等）。</li> <li>微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务为微任务。（可以理解为回调事件，promise.then，proness.nextTick等等）。
宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。</li></ul> <h4 id="说一下继承的几种方式及优缺点"><a href="#说一下继承的几种方式及优缺点" class="header-anchor">#</a> 说一下继承的几种方式及优缺点？</h4> <ul><li>借用构造函数继承，使用call或apply方法，将父对象的构造函数绑定在子对象上</li> <li>原型继承，将子对象的prototype指向父对象的一个实例</li> <li>组合继承</li></ul> <p>原型链继承的缺点</p> <ul><li>字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。</li></ul> <p>借用构造函数（类式继承）</p> <ul><li>借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。</li> <li></li></ul> <p>组合式继承</p> <ul><li>组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。</li></ul> <h4 id="说一下闭包"><a href="#说一下闭包" class="header-anchor">#</a> 说一下闭包？</h4> <p>闭包的实质是因为函数嵌套而形成的作用域链</p> <p>闭包的定义即：函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包</p> <p>export和export default的区别？
使用上的不同</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span>  xxx
<span class="token keyword">import</span> xxx <span class="token keyword">from</span> <span class="token string">'./'</span>

<span class="token keyword">export</span> xxx
<span class="token keyword">import</span> <span class="token punctuation">{</span>xxx<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./'</span>
</code></pre></div><h4 id="说一下自己常用的es6的功能"><a href="#说一下自己常用的es6的功能" class="header-anchor">#</a> 说一下自己常用的es6的功能？</h4> <p>像module、class、promise等，尽量讲的详细一点。</p> <h4 id="什么是会话cookie-什么是持久cookie"><a href="#什么是会话cookie-什么是持久cookie" class="header-anchor">#</a> 什么是会话cookie,什么是持久cookie?</h4> <p>cookie是服务器返回的，指定了expire time（有效期）的是持久cookie,没有指定的是会话cookie</p> <h4 id="数组去重"><a href="#数组去重" class="header-anchor">#</a> 数组去重？</h4> <ul><li>js</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">var</span> arr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">'12'</span><span class="token punctuation">,</span><span class="token string">'32'</span><span class="token punctuation">,</span><span class="token string">'89'</span><span class="token punctuation">,</span><span class="token string">'12'</span><span class="token punctuation">,</span><span class="token string">'12'</span><span class="token punctuation">,</span><span class="token string">'78'</span><span class="token punctuation">,</span><span class="token string">'12'</span><span class="token punctuation">,</span><span class="token string">'32'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token comment">// 最简单数组去重法</span>
    <span class="token keyword">function</span> <span class="token function">unique1</span><span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">var</span> n <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//一个新的临时数组</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> array<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token comment">//遍历当前数组</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>n<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span>
                n<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> n<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    arr<span class="token operator">=</span><span class="token function">unique1</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 速度最快， 占空间最多（空间换时间）</span>
    <span class="token keyword">function</span> <span class="token function">unique2</span><span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">var</span> n <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> r <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> type<span class="token punctuation">;</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> array<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            type <span class="token operator">=</span> <span class="token keyword">typeof</span> array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>n<span class="token punctuation">[</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                n<span class="token punctuation">[</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>type<span class="token punctuation">]</span><span class="token punctuation">;</span>
                r<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>n<span class="token punctuation">[</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token operator">&lt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                n<span class="token punctuation">[</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>type<span class="token punctuation">)</span><span class="token punctuation">;</span>
                r<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> r<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">//数组下标判断法</span>
    <span class="token keyword">function</span> <span class="token function">unique3</span><span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">var</span> n <span class="token operator">=</span> <span class="token punctuation">[</span>array<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">//结果数组</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> array<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//从第二项开始遍历</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>array<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">==</span> i<span class="token punctuation">)</span> 
                n<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> n<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

</code></pre></div><ul><li>es6</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>es6方法数组去重
arr<span class="token operator">=</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
es6方法数组去重，第二种方法
<span class="token keyword">function</span> <span class="token function">dedupe</span><span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>array<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">//Array.from()能把set结构转换为数组</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="get、post的区别"><a href="#get、post的区别" class="header-anchor">#</a> get、post的区别</h4> <p>1.get传参方式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参方式参数URL不可见，get把请求的数据在URL后通过？连接，通过&amp;进行参数分割。psot将参数存放在HTTP的包体内</p> <p>2.get传递数据是通过URL进行传递，对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制</p> <p>3.get后退不会有影响，post后退会重新进行提交</p> <p>4.get请求可以被缓存，post不可以被缓存</p> <p>5.get请求只URL编码，post支持多种编码方式</p> <p>6.get请求的记录会留在历史记录中，post请求不会留在历史记录</p> <p>7.get只支持ASCII字符，post没有字符类型限制</p> <h4 id="你所知道的http的响应码及含义"><a href="#你所知道的http的响应码及含义" class="header-anchor">#</a> 你所知道的http的响应码及含义？</h4> <p>1xx(临时响应)</p> <p>100: 请求者应当继续提出请求。</p> <p>101(切换协议) 请求者已要求服务器切换协议，服务器已确认并准备进行切换。</p> <p>2xx(成功)</p> <p>200：正确的请求返回正确的结果</p> <p>201：表示资源被正确的创建。比如说，我们 POST 用户名、密码正确创建了一个用户就可以返回 201。</p> <p>202：请求是正确的，但是结果正在处理中，这时候客户端可以通过轮询等机制继续请求。</p> <p>3xx(已重定向)</p> <p>300：请求成功，但结果有多种选择。</p> <p>301：请求成功，但是资源被永久转移。</p> <p>303：使用 GET 来访问新的地址来获取资源。</p> <p>304：请求的资源并没有被修改过</p> <p>4xx(请求错误)</p> <p>400：请求出现错误，比如请求头不对等。</p> <p>401：没有提供认证信息。请求的时候没有带上 Token 等。</p> <p>402：为以后需要所保留的状态码。</p> <p>403：请求的资源不允许访问。就是说没有权限。</p> <p>404：请求的内容不存在。</p> <p>5xx(服务器错误)</p> <p>500：服务器错误。</p></html></div> <footer class="page-edit" style="display:none;"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">2022/2/22 下午4:19:08</span></div></footer> <!----> <!----> <!----></main> <!----></div></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div><div class="kanbanniang" data-v-5775ee02><div class="banniang-container" style="display:;" data-v-5775ee02><div class="messageBox" style="right:68px;bottom:190px;display:none;" data-v-5775ee02>
      我是王茂铭谢谢你的关注 
    </div> <div class="operation" style="right:90px;bottom:40px;display:;" data-v-5775ee02><i class="kbnfont kbn-ban-home ban-home" data-v-5775ee02></i> <i class="kbnfont kbn-ban-message message" data-v-5775ee02></i> <i class="kbnfont kbn-ban-close close" data-v-5775ee02></i> <a target="_blank" href="https://vuepress-theme-reco.recoluan.com/views/plugins/kanbanniang.html" data-v-5775ee02><i class="kbnfont kbn-ban-info info" data-v-5775ee02></i></a> <i class="kbnfont kbn-ban-theme skin" style="display:;" data-v-5775ee02></i></div> <canvas id="banniang" width="240" height="352" class="live2d" style="right:90px;bottom:-20px;opacity:0.9;" data-v-5775ee02></canvas></div> <div class="showBanNiang" style="display:none;" data-v-5775ee02>
    看板娘
  </div></div><canvas id="vuepress-canvas-cursor"></canvas><APlayer audio="" fixed="true" mini="true" autoplay="autoplay" theme="#b7daff" loop="loop" order="random" preload="auto" volume="0.2" mutex="true" lrc-type="1" list-max-height="250" storage-name="vuepress-plugin-meting" id="aplayer-fixed"></APlayer></div></div>
    <script src="/blog/assets/js/app.e4cba77b.js" defer></script><script src="/blog/assets/js/5.1ad0ff24.js" defer></script><script src="/blog/assets/js/1.fe4eac58.js" defer></script><script src="/blog/assets/js/43.ace95e0e.js" defer></script>
  </body>
</html>
